CV Assignment Walkthrough #1 (Content)

This walkthrough will help you get familiar with content types in Drupal. The first CCT460 design assignment will require you to set up a static page displaying your CV in Drupal. Given your limited experience with the CMS, I wouldn't ask you to figure out how to do this yourself, so I'm going to prepare a step-by-step walkthrough that I'd like each of you to follow. It would be most productive if you do so in class on the 26th, but as long as you've done these tasks in class for the July 19th class you should be fine. Working through this (and the preceding) exercise will allow you to learn the 'basics' of views so that you can build much more complex functionality and displays weeks 4-6.

  1. Download, enable and set the 960 Grid System theme to default.
  2. Install and activate the Date module (while doing so enable the Date, Date API, Date Popup and Date Views submodules) and Views (if you don't already have it installed – and you'll need the Views UI submodule installed as well)
  3. You now have the tools in place for the CV Assignment – or at least to get started on it.

Note: You're probably going to need to take some time to organize your CV if you haven't got a relatively recent one available. Work on this over the next few days, and just work with whatever information you can remember in the meantime – you can always replace it with correct info later, right?

Preliminary Setup – Setting up the CV content, Objective and Address

One of the confusing/empowering things about Drupal is that there is many ways to accomplish any one task. This is by no means the most efficient way to create the publishing workflow you'll need – my goal is to expose you to the functionality you may want to use throughout the rest of the semester. So with that disclaimer noted... please follow the below directions closely.

  1. Go to Structure >> Content types – the first thing we'll do is set up a CV page content type
  2. Click on 'Add Content Type'
  3. On the following screen click on 'Add Content Type'
Screen-Shot-2012-01-25-at-6.38.png

  1. You'll end up on the content type configuration page – here you will want to enter a name for our new content type (try CV), and a description (I just used 'CV content'). There are numerous other features we can tweak via the tabs below though...
  2. ...click on 'publishing options' and untick 'promoted to front page'. This means every new piece of 'CV' content will not be bounced to the front page when it is submitted.
  3. Click on 'Display settings' and then untick 'Display author and date information' – we don't need a stamp like "Submitted by admin on Fri, 2012-01-13 00:00" on your CV right?
  4. Click on 'Comment settings' and set the 'Default comment setting for new content' to 'Hidden'
  5. Note that 'Menu Settings' could allow us to link a content type to a specific menu – by default it is linked to the Main Menu, so we'll just leave that as is. Click on 'Save Content Type'

Further Customizing the Content Type and Adding Fields

  1. Go to Structure >> Content types, click on 'edit' to the right of 'CV'
  2. Now click on the 'Manage Fields' tab. This is where we can edit what appears within a content type.
Screen_Shot_2012-01-25_at_7.07.png
  • Click on 'edit' on the far right of the Body item. A new screen opens up where we can customize the body of this content type – for the moment, just change the label from 'body' to 'objective'. There is not much customization to be done with the body field but other types of fields provide numerous options.

Ok, we've got a means to add 'CV Pages' to the site. Let's add the page we'll use for our CV...

  1. Go to Add Content >> CV
  2. Set the title to '<Your Name> – Curriculum Vitae'
  3. In 'Objective' enter a 25-100 word statement about your employment objective. If you don't have something like this written, just use filler text in the meantime.
  4. We want a menu link to appear for this page, so in the 'menu' area enter 'CV' (Under 'Menu link title')
  5. Hit 'Save'
Screen_Shot_2012-01-25_at_7.21.png
Now your CV page will look something like this – dull, but it is a start.

Address and Contact Information

Next we'll add your basic contact information to the page.

  • Go to Structure >> Content Types and click on 'manage fields' to the right of the CV content type
Screen_Shot_2012-01-25_at_8.23.png

  1. Scroll down to 'Add new field' and enter 'Address' in the label field, 'address' in the name field and select 'long text' as the 'type of data to store'. Click on 'Save'. Note the other options, we can expand these by installing various modules (e.g. Media: YouTube for YouTube URLs, etc.)
  2. The next screen is where we might adjust settings, but there is none for the field type 'text area' so we just have to click on 'save field settings'
  3. Now we are bounced to another settings screen – this is where we control how the 'address' field will display when a user is adding content to the CV content type. So, we can leave the label as is and don't need any help text (but if this was being made for other users we might), we can leave the rows as 5 and we could also set a default value if we wanted, we could also set the number of values (obviously for address we don't want this to be more than one, but if it the field was for images or links we might want to provide the ability to add many bits of content).
  4. Click on 'Save settings'
  5. Now we can see the fruits of your labour – go back to your CV page and click on 'edit' – there should be an address field there now. Enter in your address and save the node.
Screen_Shot_2012-01-25_at_8.50.png
Now your CV will look something like this. There is only one problem... we probably don't need the address field to be labelled, as it is pretty clear what it is. To fix this:

  1. Go to Structure >> Content Types and click on 'manage display' to the right of the CV content type. This takes us to the page where we control how content is rendered when it is viewed.
  2. Now, under 'Label' for 'Address' set it to <hidden>. This turns off the label on the display of our CV content type.
  3. Click on 'Custom Display Settings' – note that you can set custom options for 'Full Content' (pages), 'Teasers' (previews), RSS (XML output to feedreaders), Search Results (internal search) and make them all custom – so you can have the same content rendered in different ways in different parts of the site.
  4. Click on 'Save'

Employment History, Education and Honours & Awards

  1. Go to Structure >> Content Types and click on 'Add content type'
  2. Under 'Name' enter 'Employment', 'Machine-readable name' enter 'employment', and in the 'Description' field enter something like 'A job'
  3. Change 'Title field label' from 'Title' to 'Employer'. This is the field we will identify each job with.
  4. In Publishing untick 'Promoted to front page', 'display settings' untick 'Display date and author information', 'comment settings' untick 'Display author and date information', and 'comment settings' change ' Default comment setting for new content' to 'Hidden' – click 'Save and add fields'

So we have a field to name a job, but we need more information like when you worked there and what the position was. Let's add these:
  1. Within edit mode for 'Employment' go to 'Manage Fields'
  2. In 'Add new field' enter 'Date' for label and 'date' for 'field' and selecte 'Date' for 'Type of data to store – then pick 'Pop-up calendar' for 'Widget'. With these directions we are creating a date field and we'll use a jQuery pop up window to enter that date. Click on 'Save'
Screen_Shot_2012-01-25_at_10.21.png
  1. The above screen will open up. With the menu at the top we set the granularity (specificity) of the date – untick minute, hour and day (we don't need to be THAT specific when tracking how long we worked somewhere, right?). Tick off 'Collect an end date' and hit 'Save field settings'
  2. Now, navigate back to 'manage fields' for 'Employment' and in 'Add new field' set the 'Label' to 'Position', 'field' to 'position', 'Type of data to store' to 'Text'. (btw – if you were wondering the label is for display purposes and the 'field name' is the machine readable ID for a field). Click on 'Save'
  3. Leave the Maximum length as 255 characters and click on 'Save field settings' – on the next screen we can leave everything exactly as it is and click on 'Save settings'
Screen_Shot_2012-01-25_at_10.42.png
Now, when we are bounced back to the field page we have to think about this from a user perspective. If you were entering information about a job what order of fields would be the most logical? Probably, employer (title), position, date and Body (where we'll write the information about the position).

  • Drag the fields into the order described above and click on 'Save'. Now you can enter information about your employment history.

Adding your Employment History to the Site

  1. Go to Add content >> Employment
  2. Enter the requested information about a job you've held – when you are done hit 'Save'
  3. Repeat the above step for your entire employment history. As you add each 'Employment' Node, don't worry about the ugly pages being output – we're going to feed this onto your CV page via views.

So – that is it. Now use the same steps that you did to create the Employment History content type, go through the exact same steps to create a content type for 'Education' and then enter your education history. This will give us the base content we need to develop our CV's for the first assignment. Next session we'll learn how to leverage this information as the basis of a custom display (a 'view').